import React, { useState } from 'react';
import './createActivity.less';
import Content from './components/content';
export default function () {
  const [tags, setTags] = useState([
    { id: 8, name: '全部', show: true },
    { id: 2, name: '进行中', show: false },
    { id: 3, name: '未开始', show: false },
    { id: 5, name: '已结束', show: false },
    { id: 1, name: '待审核', show: false },
    { id: 4, name: '已驳回', show: false },
    { id: 7, name: '草稿箱', show: false },
  ]);
  const [tellSome, setTellSome] = useState([]);
  function handleTags(item) {
    // console.log(item)
    let a = tags.map((m) => {
      if (m.id == item.id) {
        m.show = true;
      } else {
        m.show = false;
      }
      return m;
    });
    // console.log(a)
    setTags(a);
    setTellSome([item.id]);
  }

  return (
    <div className="create-activity">
      <div className="activity-title">
        <div className="title-first">创建活动</div>
        <div className="title-second">创建活动</div>
      </div>

      <div
        className="site-layout-background"
        style={{ padding: 24, minHeight: '100vh' }}
      >
        <div className="activity-list">
          {tags.map((item, index) => {
            return (
              <div
                key={item.id}
                className={item.show ? 'activity-tags' : 'tags-item'}
                onClick={() => {
                  handleTags(item);
                }}
              >
                {item.name}
              </div>
            );
          })}
        </div>

        <Content tellSome={tellSome}></Content>
      </div>
    </div>
  );
}
